<!DOCTYPE html>
<html>
  <head>
    <title>Tree View</title>
    <script src="https://unpkg.com/vue@2"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!-- <script src="/_assets/js/app/treedata.js"></script> -->
    <!-- <script src="/_assets/js/app/task_test_data.js"></script> -->
    <script src="/_assets/js/app/get_task_test_data.js"></script>

    <link href="/libs/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="/style.css" />
    <link rel="stylesheet" href="/_assets/css/base.css">
    <link rel="stylesheet" href="/_assets/css/home_with_bs.css">
    <link rel="stylesheet" href="/_assets/css/task_with_bs.css">

    <!-- item template -->
    <script type="text/x-template" id="item-template">
    <li>
        <!-- :class="{bold: isFolder}" -->
        <div 
          v-bind:class = "(isFolder ? 'haschild' : '') + ' task'"

 
          @dblclick="makeFolder">
          <!-- <span v-if="isFolder">[{{ isOpen ? 'V' : '>' }}]</span> -->
          <span class="fold_icon"  @click="toggle"><i :class="(isFolder ? isOpen ? 'fa-folder-open-o' : 'fa-folder-o' : 'fa-square') + ' fa'"></i></span>
          <span class="task_title">{{ item.title }} </span>
          <span v-if="hasLink" > <i class="fa fa-link"></i></span>
          <span v-if="hasComment" > <i class="fa fa-comment"></i></span>
          <span class="icon_button btn_for_toolbar"  @click="openToolbar"><i :class="(toolbarOpen ? 'fa-angle-double-left' : 'fa-angle-double-right') + ' fa fa-lg '"></i></span>
       
          <div v-if="hasComment" class="task_comment">{{ item.comment }} </div>
        </div>
        <ul v-show="isOpen" v-if="isFolder">
          <tree-item
            class="item"
            v-for="(child, index) in item.children"
            :key="index"
            :item="child"
            @make-folder="$emit('make-folder', $event)"
            @add-item="$emit('add-item', $event)"
          ></tree-item>
          <li class="add" @click="$emit('add-item', item)">+</li>
        </ul>
      </li>
    </script>

    
  </head>
  <body>
    <p>(You can double click on an item to turn it into a folder.)</p>

    <!-- the demo root element -->
    <ul id="demo">
      <tree-item 
        class="item"
        :item="treeData"
        @make-folder="makeFolder"
        @add-item="addItem"
      ></tree-item>
    </ul>

    <script>
      // demo data
      var treeData = {
        title: "My Tree",
        children: [
          { title: "hello" },
          { title: "wat" },
          {
            title: "child folder",
            children: [
              {
                title: "child folder",
                children: [{ title: "hello" }, { title: "wat" }]
              },
              { title: "hello" },
              { title: "wat" },
              {
                title: "child folder",
                children: [{ title: "hello" }, { title: "wat" }]
              }
            ]
          }
        ]
      };
      

      // define the tree-item component
      Vue.component("tree-item",{
        template: "#item-template",
        props: {
          item: Object
        },
        data: function() {
          return {
            isOpen: false,
            toolbarOpen :false
          };
        },
        computed: {
          isFolder: function() {
            return this.item.children && this.item.children.length;
          },
          hasLink:function(){
            return this.item.link;
          },
          hasComment:function(){
            return this.item.comment;
          }
        },
        mounted() {
        },
        created() {
        },
        methods: {
          toggle: function() {
            if (this.isFolder) {
              this.isOpen = !this.isOpen;
            }
          },
          openToolbar: function(){
              this.toolbarOpen = !this.toolbarOpen;

          },
          makeFolder: function() {
            if (!this.isFolder) {
              this.$emit("make-folder", this.item);
              this.isOpen = true;
            }
          }
        }
      });



      axios.get('/index.php/tasktree/getallchild/81')
              .then(function (response) {
                console.log(response);
                let task_example_data = response.data.data;
                // console.log(task_example_data);
                var getTreeData = list_to_tree(task_example_data);
                console.log(getTreeData)
                  // boot up the demo
                  var demo = new Vue({
                    el: "#demo",
                    data: {
                      // treeData: treeData
                      treeData:getTreeData
                    },
                    mounted() {
                    },
                    created() {
                      // this.getTreeData()
                      // this.treeData = treeData
                    },
                    methods: {
                      makeFolder: function(item) {
                        Vue.set(item, "children", []);
                        this.addItem(item);
                      },
                      addItem: function(item) {
                        item.children.push({
                          title: "new stuff"
                        });
                      }
                    }
                  });




              })
              .catch(function (error) {
                console.log(error);
              });



    </script>
  </body>
</html>
